<template>
  <div class="base-card-tab">
    <div class="base-card-tab_item" :class="[index == active ? 'act' : 'def']" v-for="(item, index) in list"
      :key="index" @click="changeTab(item, index)">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup lang="js">

const emits = defineEmits(["handleChangeTab", "update:active"])

defineProps({
  list: {
    type: Array,
    required: true
  },
  active: {
    type: Number,
    require: true
  }
})

// 切换tab
const changeTab = (item, index) => {
  emits("update:active", index)
  // 防止需要处理特殊情况 
  emits("handleChangeTab", item)
}
</script>
<style scoped lang="scss">
.base-card-tab {
  display: flex;

  &_item {
    cursor: pointer;
    width: vw(132);
    height: vh(45);
    border-radius: vw(4);
    text-align: center;
    line-height: vh(45);
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: vw(18);
    margin-right: vw(8);
  }

  .def {
    opacity: 0.45;
    color: #fff;
    background: linear-gradient(180deg, #1A3A44 0%, rgba(23, 55, 67, 0.47) 100%);
  }

  .act {
    background: #173743;
    color: #fff;
  }
}
</style>